<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>fu</title>
		<link rel="stylesheet" type="text/css" href="css/fzc.css" />
	</head>
	<body>
		<!-- 导航、banner -->
		<div class="box">
			<div class="daohang_box">
				<div class="logo">
					<img src="img/logo.png">
				</div>

				<div class="daohang">
					<a href="##">
						<li class="shou" style=" font-size:18px;">首页</li>
					</a>
					<a href="#a1">
						<li>个人简历</li>
					</a>
					<a href="#a2">
						<li>做品展示</li>
					</a>
					<a href="#a3">
						<li>工作经历</li>
					</a>
					<a href="#a4">
						<li>联系我</li>
					</a>

				</div>

				<div class="sousuo">
					<a href="##"><img src="img/放大镜.png"></a>
				</div>

			</div>
			<div class="liao">
				<a href="#a1">了解详情></a>
			</div>

		</div>

		<div class="design">
			<img src="img/Design-1.png">
		</div>

		<!-- 关于我 -->
		<div class="me_box">
			<a name="a1"><img src="img/人物.png"></a>
			<div class="me">
				<img src="img/关于我.png">
				<div class="text">
					<p class="name"> 付正春 / <span> 平面设计师&网页设计师
						</span></p>
					<p> 生日：2000-11-24 <br>
						手机号：18715912575 <br>
						地址：沧州市 运河区 沧州职业技术学院<br>
						邮箱：2870588958@qq.com<br>
					</p>
				</div>
			</div>
		</div>

		<!-- 线 -->
		<div class="xian"></div>

		<!-- 我的技能 -->
		<div class="jineng">
			<div class="jineg_itm">
				<img src="img/我的技能.png">
			</div>
			<div class="pic_box">
				<div class="pic">
					<img src="img/ps.png">
					<p>UI设计、平面设计<br>
						网页设计、摄影后期</p>
				</div>
				<div class="pic">
					<img src="img/h.png">
					<p>Html5<br> css语言</p>
				</div>
				<div class="pic">
					<img src="img/ai.png">
					<p>矢量绘图
						<br>
						LOGO制作</p>
				</div>
				<div class="pic">
					<img src="img/pr.png">
					<p>视频剪辑
						<br>
						视频特效制作</p>
				</div>
			</div>
		</div>

		<!-- 中间banner -->
		<div class="banner_a">
			<img src="img/中间bannner.png">
			<div class="text_a">
				<div class="text_aa">
					<span>220 </span>
					<p>累计服务过的客户数量(位)</p>
				</div>
				<div class="text_aa">
					<span>2400 </span>
					<p>累计工作时间(时)</p>
				</div>
				<div class="text_aa">
					<span>32 </span>
					<p>累计设计获奖数量(个)</p>
				</div>
				<div class="text_aa">
					<span>3 </span>
					<p>累计工作经验(年)</p>
				</div>
			</div>
		</div>

		<!-- 作品展示 -->
		<div class="mt-tabpage" js-tab="3">

			<div class="zuopin_a">
				<a name="a2"><img src="img/作品展示.png"></a>
			</div>

			<div class="mt-tabpage-title">
				<a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">广告</a>
				<a href="javascript:;" class="mt-tabpage-item">电商</a>
				<a href="javascript:;" class="mt-tabpage-item">网页</a>
				<a href="javascript:;" class="mt-tabpage-item">ui</a>
				<a href="javascript:;" class="mt-tabpage-item">手绘</a>
				<a href="javascript:;" class="mt-tabpage-item">证书</a>

			</div>
			<div class="mt-tabpage-count">
				<ul class="mt-tabpage-cont__wrap">
					<li class="mt-tabpage-item"><img src="img/作品.png"></li>
					<li class="mt-tabpage-item"><img src="img/电商.png" ></li>
					<li class="mt-tabpage-item"><img src="img/wangye.png" ></li>
					<li class="mt-tabpage-item"><img src="img/ui.png" ></li>
					<li class="mt-tabpage-item"><img src="img/电商.png" ></li>
					<li class="mt-tabpage-item"><img src="img/wangye.png" ></li>

				</ul>
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/mt-tabpage.js"></script>

		<script type="text/javascript">
			$(function() {

				// 	$('[js-tab=2]').tab({
				// 		mouse: 'over',   //切换方式：over，click
				// 		autoPlay: true,  //播放方式：false，true
				// 		curDisplay: 1,     //当前第一个打开
				// 		changeMethod: 'horizontal'  //切换选项：默认default，horizontal，vertical，opacity这4种方式
				// 	});

				$('[js-tab=3]').tab({
					curDisplay: 3,
					changeMethod: 'horizontal'
				});

			});
		</script>




		<!-- 工作经历 -->
		<div class="mt-tabpage" js-tab="2">

			<div class="zuopin_a">
				<a name="a3"><img src="img/工作经历.png"></a>
			</div>

			<div class="mt-tabpage-title">
				<a href="javascript:;" class="mt-tabpage-item mt-tabpage-item-cur">2020</a>
				<a href="javascript:;" class="mt-tabpage-item">2019</a>
				<a href="javascript:;" class="mt-tabpage-item">2018</a>


			</div>

			<div class="jingli_e">
				<div class="mt-tabpage-count">
					<ul class="mt-tabpage-cont__wrap">
						<li class="mt-tabpage-item">
							<div class="jingli_c">
								<div class="c_text">
									<h5>沧州职业技术学院</h5>
									<span>平面设计师</span>
									<p>2019/09-至今
										负责产品的规划和创意，分析业务需求，归纳、分解出交互需求，设计产品的人机，交互界面结构、用户操作流程等，完成界面的信息架构、流程设计及界面的风格定位，提高产品的易用性负责产品的规划和创意，分析业务需求，归纳、分解出交互需求，设计产品的人机，交互界面结构、用户操作流程等，完成界面的信息架构、流程设计及界面的风格定位，提高产品的易用性负责产品的规划和创意，分析业务需求，归纳、分解出交互需求，设计产品的人机，交互界面结构、用户操作流程等，完成界面的信息架构、流程设计及界面的风格定位，提高产品的易用性负责产品的规划和创意，分析业务需求，归纳、分解出交互需求，设计产品的人机，交互界面结构、用户操作流程等，完成界面的信息架构、流程设计及界面的风格定位，提高产品的易用性负责产品的规划和创意，分析业务需求，归纳、分解出交互需求，设计产品的人机，交互界面结构、用户操作流程等，完成界面的信息架构、流程设计及界面的风格定位，提高产品的易用性负责产品的规划和创意，分析业务需求，归纳、分解出交互需求，设计产品的人机，交互界面结构、用户操作流程等，完成界面的信息架构、流程设计及界面的风格定位，提高产品的易用性。</p>
								</div>
								<div class="c_pic">
									<img src="img/人物2.png">
								</div>
							</div>
						</li>
						<li class="mt-tabpage-item"><img src="img/2019.png" ></li>
						<li class="mt-tabpage-item"><img src="img/2018.png" ></li>

					</ul>
				</div>
			</div>
		</div>


		<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
		<script type="text/javascript" src="js/mt-tabpage.js"></script>

		<script type="text/javascript">
			$(function() {

				// 	$('[js-tab=2]').tab({
				// 		mouse: 'over',   //切换方式：over，click
				// 		autoPlay: true,  //播放方式：false，true
				// 		curDisplay: 1,     //当前第一个打开
				// 		changeMethod: 'horizontal'  //切换选项：默认default，horizontal，vertical，opacity这4种方式
				// 	});

				$('[js-tab=2]').tab({
					curDisplay: 1,
					changeMethod: 'horizontal'
				});

			});
		</script>
		
			<div class="desgin_d">
		<img src="img/Design-4.png" >
	</div>

		<!-- 底部导航 -->
		<div class="daohang_a">
			<a name="a4"><img src="img/底部导航.png"></a>
			<div class="daohang_b">
				<img src="img/二维码.png">
				<p>扫描二维码联系我</p>
			</div>
		</div>

	</body>
</html>
